{% extends '::base.html.twig' %}
{%block barraNavegacion%}
{%endblock%}
{%block footer%}
{%endblock%}
{%block pacejs%}{%endblock%}
{%block pacecss%}{%endblock%}
{% block container %}{%endblock%}
{% block endcontainer %}{%endblock%}
{% block body%}
<div class="row">
</div>
<div class="row" style="width: 1100px;">
    <div class="col-md-12">
        <input type="hidden" name="pacienteId" id="pacienteId" value="{{paciente.id}}"/>
        <input type="hidden" name="sugerenciaId" id="sugerenciaId" value="0"/>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td style="padding-right: 10px;"><label for="fecha">Fecha</label></td>
                <td>
                    <div id="datetimepicker" class="input-append datetimepicker" style="display: inline;">
                        <input placeholder="Fecha" data-format="yyyy-MM-dd hh:mm:ss" type="text" name="fecha" id="fecha" readonly="true"></input>
                        <span class="add-on">
                            <img src="{{ asset('bundles/histclinica/images/calendar.png') }}">
                        </span>
                    </div>  
                    
                </td>
                <td style="padding-right: 20px;"><div style="color: #800" id="fecha_errors"></div></td>
                <td>
                    <a onclick="cargarProcedimientos();" class="btn btn-default">
                        <img src="{{ asset('bundles/histclinica/images/icons/reload.png') }}" width="20px" alt="Recargar" title="Recargar"/>
                     </a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="row" style="width: 1100px;">
    <div class="col-md-12" style="padding-top: 8px;">
        <table>
            <tr>
                <td>
                    <div id="rowProcedimiento">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td style="padding-right: 10px;"><label for="procedimiento">Procedimiento </label></td>
                                <td> 
                                    <select class="form-control" name="procedimiento" id="procedimiento" onchange="getCostoProcedimiento(this)" >
                                        <option value="">Seleccionar</option>
                                    </select>                                        
                                        
                                </td>
                                <td style="padding-right: 20px;"><div style="color: #800" id="procedimiento_errors"></div></td>
                                <td style="padding-right: 10px;"><label class="" for="diente">Diente </label></td>
                                <td><input placeholder="Diente" type="text" name="diente" id="diente" class="form-control"/></td>
                                <td style="padding-right: 20px;"><div style="color: #800" id="diente_errors"></div></td>
                                <td style="padding-right: 10px;"><label for="costoProcedimiento" >Costo </label></td>
                                <td style="padding-right: 20px;"><input placeholder="Costo"type="number" name="costoProcedimiento" id="costoProcedimiento"class="form-control"/></td>
                                <td style="padding-right: 20px;"><div style="color: #800" id="costoProcedimiento_errors"></div></td>

                                <td id="divBorrar">

                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td valign="bottom" style="padding-left: 5px;">
                    <a onclick="agregarProcedimiento()" class="btn btn-default">
                        <img src="{{ asset('bundles/histclinica/images/icons/plus-20.png') }}" width="20px" alt="Crear" title="Crear"/>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="row">         


</div>
<div class="row" style="width: 1100px;">    
    <div class="col-md-12" style="padding-top: 15px; padding-bottom: 5px;">
        <table>
            <tr>
                <td><a onclick="agregarAtencion()" class="btn btn-default {% if is_granted('ROLE_ADMIN') %} disabled {% endif %}" id="btnAgregarProcedimiento">                 
                        <img src='{{ asset('bundles/histclinica/images/icons/save-16.png') }}' width='16px' />
                        Guardar
                    </a></td>
            </tr>
        </table>
    </div>
</div>
<div class="row" style="width: 1100px; ">
    <div class="col-md-12">
        <table class="records_list table table-striped table-condensed table-bordered" id="tratamientos">
            <thead>
                <tr>
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3;">Fecha</th>                    
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3">Hora</th>
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3">Diente</th>
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3">Tratamiento Ejecutado</th>                    
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3">Costo</th>
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3">Firma Odontólogo</th>
                    <th style="background-color: #1CA9A3; border-color: #1CA9A3"></th>
                </tr>
            </thead>
            <tbody>
            {%if atenciones is defined and atenciones!=null%}
            {%for atencion in atenciones%}
            {%for tratamiento in atencion.tratamientos%}
                <tr id="{{tratamiento.id}}">
                    <td style="width: 100px;">{{atencion.fechaHora|date('Y-m-d')}}</td>
                    <td style="width: 100px;">{{atencion.fechaHora|date('H:i:s')}}</td>                    
                    <td>{{tratamiento.diente}}</td>
                    <td>{{tratamiento.procedimiento.descripcion}}</td>                    
                    <td style="width: 100px; text-align: right;">$ {{tratamiento.costoProcedimiento}}</td>
                    <td rowspan="2">
                        <img id="firmaM_{{tratamiento.id}}" src="{{asset('uploads/medicos/'~atencion.medico.pathFirma)}}" style="max-width: 150px; max-height: 50px" >
                    </td>
                    <td rowspan="2"  id="tdlink{{tratamiento.id}}">                        
                        {%if tratamiento.descripcion ==null%}
                        <a href="#" onclick="displayModal({{tratamiento.id}});"><img src="{{ asset('bundles/histclinica/images/icons/edit-20.png') }}" width="20px" alt="Editar" title="Editar"></a>    
                        {%endif%}
                    </td>                                        
                </tr>                
                <tr id="descripcion{{tratamiento.id}}">
                    {%if tratamiento.descripcion !=null%}
                        <td colspan="5">{{tratamiento.descripcion}}</td>
                    {%endif%}            
                </tr>
            {%endfor%}
            {%endfor%}
            {%endif%}
            </tbody>
        </table>
    </div>
</div>

<div id="modalDescripcion" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header" style="text-align: center" >
                <h4>Descripción del tratamiento</h4>
            </div>
            <!-- dialog body -->
            <div class="modal-body" id="modalDescripcion">
                <textarea required id="txtdescripcion"  rows="4" style="width: 568px;"></textarea>
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer">                
            <button type="button" class="btn" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" onclick="registrarDescripcin()">Guardar</button>
            </div>
          </div>
        </div>
      </div>

<script type="text/javascript" lang="javascript">
    var numRows = 1;
    var procedimiento = 'procedimiento';
    var diente = 'diente';
    var costoProcedimiento = 'costoProcedimiento';
    var rorwProcedimiento = 'rowProcedimiento';
    var pathFirma = '{{ asset('bundles/histclinica/images/no_image.png') }}';
    var msj_required = "<img src='{{ asset('bundles/histclinica/images/icons/alert.png') }}' width='20px' />";
    var divBorrar = "divBorrar";
    var listaSugerencias;
    
    var tratamiento_actual = -1;
    
    function displayModal(tratamientoId)
    {   
        tratamiento_actual = tratamientoId;
        jQuery("#modalDescripcion").modal('show');
        $("#txtdescripcion").val('');
    }
    
    function registrarDescripcin()
    {
        var strdescripcion  = $("#txtdescripcion").val();
         $.post('{{path('atencion_registradescripcion')}}',
            {
                        tratamientoId: tratamiento_actual,
                        descripcion: strdescripcion
            },
            function(response) {
                jQuery("#modalDescripcion").modal('hide');                
                jQuery("#descripcion" + tratamiento_actual).get(0).innerHTML = "<td colspan='5'>" + strdescripcion + "</td>";
                jQuery("#tdlink" + tratamiento_actual).get(0).innerHTML = '';
            }, "json");   
    }

    function getCostoProcedimiento(elemento) {
        var procedimientoId = elemento.value;
        var indice = elemento.id.toString().split("_")[1];
        var ban=false;
        if (procedimientoId.trim() != "") {
            for(i=0;i<listaSugerencias.length && ban==false;i++){
                if(listaSugerencias[i].procedimientoId==procedimientoId){
                    document.getElementById(costoProcedimiento + '_' + indice).value = listaSugerencias[i].costo;
                    ban=true;
                }else{
                    ban=false
                }
            }
            if (ban==false) {                
                document.getElementById(costoProcedimiento + '_' + indice).value = "";
            } 
        }
    }

    function cargarProcedimientos() {   
        
        
        var pacienteId = document.getElementById("pacienteId").value;
        $.post('{{path('sugerencia_cargarProcedimientos')}}',
                {
                    pacienteId: pacienteId
                },
        function(response) {
            if (response != null) {
                listaSugerencias = response;
            }
            var selectProcedimientos = $("select[name='procedimiento']");
            selectProcedimientos.each(function(){
                $(this).get(0).innerHTML = '<option value="">Seleccionar</option>';
                for (i = 0; i < response.length; i++) {
                    var option = document.createElement('option');
                    option.value = response[i].procedimientoId;
                    option.innerHTML = response[i].descripcion;
                    $(this).get(0).appendChild(option);
                }
            });
        }, "json");
    }

    function agregarProcedimiento() {
        var numIndice = 1;
        var newIndice = numRows + 1;
        //se accede a cada uno de los elementos con el indice obtenido
        var inputProcedimiento = document.getElementById(procedimiento + '_' + numIndice);
        var inputDiente = document.getElementById(diente + '_' + numIndice);
        var inputCostoProcedimiento = document.getElementById(costoProcedimiento + '_' + numIndice);
        var divProcedError = document.getElementById(procedimiento + '_' + numIndice + '_errors');
        var divDienteError = document.getElementById(diente + '_' + numIndice + '_errors');
        var divCostProcedError = document.getElementById(costoProcedimiento + '_' + numIndice + '_errors');
        var divRowProcedimiento = document.getElementById(rorwProcedimiento + '_' + numIndice);
        var div_Borrar = document.getElementById(divBorrar + '_' + numIndice);
        //se edita cada uno de los elementos como si fuera el siguiente con el fin de clonarlo
        inputProcedimiento.setAttribute('id', procedimiento + '_' + newIndice.toString());
        inputDiente.setAttribute('id', diente + '_' + newIndice.toString());
        inputCostoProcedimiento.setAttribute('id', costoProcedimiento + '_' + newIndice.toString());
        divProcedError.setAttribute('id', procedimiento + '_' + newIndice.toString() + '_errors');
        divProcedError.innerHTML = "";
        divDienteError.setAttribute('id', diente + '_' + newIndice.toString() + '_errors');
        divDienteError.innerHTML = "";
        divCostProcedError.setAttribute('id', costoProcedimiento + '_' + newIndice.toString() + '_errors');
        divCostProcedError.innerHTML = "";
        div_Borrar.setAttribute('id', divBorrar + '_' + newIndice.toString());
        div_Borrar.innerHTML = '<a onclick="borrarProcedimiento(this)" id="btnBorrarProcedimiento"><img src="{{ asset('bundles/histclinica/images/icons/cancel-22.png') }}" width="20px" alt="Borrar"  title="Borrar"/></a>';
        divRowProcedimiento.setAttribute('id', rorwProcedimiento + '_' + newIndice.toString());
        //se crea la nueva fila para registro de pocedimiento a partir de la anterior
        var newRowProcedimiento = divRowProcedimiento.cloneNode(true);
        //borrando la opcion de agregar
        //row.removeChild(boton);
        //agregando la nueva fila
        var procedimientos = divRowProcedimiento.parentNode;
        procedimientos.appendChild(newRowProcedimiento);
        //regresando el nodo clonado a su estado inicial
        inputProcedimiento.setAttribute('id', procedimiento + '_' + numIndice.toString());
        inputDiente.setAttribute('id', diente + '_' + numIndice.toString());
        inputCostoProcedimiento.setAttribute('id', costoProcedimiento + '_' + numIndice.toString());
        divProcedError.setAttribute('id', procedimiento + '_' + numIndice.toString() + '_errors');
        divDienteError.setAttribute('id', diente + '_' + numIndice.toString() + '_errors');
        divCostProcedError.setAttribute('id', costoProcedimiento + '_' + numIndice.toString() + '_errors');
        divRowProcedimiento.setAttribute('id', rorwProcedimiento + '_' + numIndice.toString());
        div_Borrar.setAttribute('id', divBorrar + '_' + numIndice.toString());
        div_Borrar.innerHTML = "";
        //dejando en blanco los nuevos inputs
        document.getElementById(procedimiento + '_' + newIndice).selectedIndex = "0";
        document.getElementById(diente + '_' + newIndice).value = "";
        document.getElementById(costoProcedimiento + '_' + newIndice).value = "";
        numRows++;
    }
    function justNumbers(e)
    {
        var keynum = window.event ? window.event.keyCode : e.which;
        if ((keynum == 8) || (keynum == 46))
            return true;

        return /\d/.test(String.fromCharCode(keynum));
    }
    function agregarAtencion() {
        var isValid = true;
        var inputFecha = document.getElementById('fecha');
        //validando los campos
        if (inputFecha.value.toString().trim() == "") {
            document.getElementById('fecha_errors').innerHTML = msj_required;
            isValid = false;
        } else {
            document.getElementById('fecha_errors').innerHTML = "";
        }
        var contador = 0;
        for (i = 1; i <= numRows; i++) {
            var inputProcedimiento = document.getElementById(procedimiento + '_' + i);
            if (inputProcedimiento != null) {
                if (inputProcedimiento.value.toString().trim() == "") {
                    document.getElementById(procedimiento + '_' + i + '_errors').innerHTML = msj_required;
                    isValid = false;
                } else {
                    document.getElementById(procedimiento + '_' + i + '_errors').innerHTML = "";
                }
                var inputDiente = document.getElementById(diente + '_' + i);
                if (inputDiente.value.toString().trim() == "") {
                    document.getElementById(diente + '_' + i + '_errors').innerHTML = msj_required;
                    isValid = false;
                } else {
                    document.getElementById(diente + '_' + i + '_errors').innerHTML = "";
                }
                var inputCostProced = document.getElementById(costoProcedimiento + '_' + i);
                if (inputCostProced.value.toString().trim() == "") {
                    document.getElementById(costoProcedimiento + '_' + i + '_errors').innerHTML = msj_required;
                    isValid = false;
                } else {
                    document.getElementById(costoProcedimiento + '_' + i + '_errors').innerHTML = "";
                }
                contador++;
            }
        }
        //alert(contador);
        if (isValid) {
            var fecha = inputFecha.value;
            var firmaPaciente = pathFirma;
            var total = 0;
            var procedimientos = new Array(contador);
            var pacienteId = document.getElementById("pacienteId").value;
            var pos = 0;
            for (i = 1; i <= numRows; i++) {
                var inputProcedimiento = document.getElementById(procedimiento + '_' + i.toString());
                if (inputProcedimiento != null) {
                    var inputDiente = document.getElementById(diente + '_' + i.toString());
                    var inputCostoProcedimiento = document.getElementById(costoProcedimiento + '_' + i.toString());
                    var tratamiento = new Array(3);
                    // alert(inputProcedimiento.value+inputDiente.value+inputCostoProcedimiento.value);
                    tratamiento[0] = inputProcedimiento.value;
                    tratamiento[1] = inputDiente.value;
                    tratamiento[2] = inputCostoProcedimiento.value;
                    procedimientos[pos] = tratamiento;
                    pos++;
                }
            }
            $.post('{{path('atencion_create')}}',
                    {
                        pacienteId: pacienteId,
                        tratamientos: procedimientos,
                        fecha: fecha,
                        firmaPaciente: firmaPaciente,
                        total: total
                    },
            function(response) {
                var table = document.getElementById("tratamientos");
                for (i = 0; i < response.length; i++) {
                    var rowCount = table.rows.length;
                    var row = table.insertRow(rowCount);
                    row.id = response[i].tratamientoId;
                    var fechaCell = row.insertCell(0);
                    fechaCell.setAttribute('style', 'width: 100px;');
                    var horaCell = row.insertCell(1);
                    horaCell.setAttribute('style', 'width: 100px;');
                    var dienteCell = row.insertCell(2);
                    var tratamientoCell = row.insertCell(3);                                        
                    var costoCell = row.insertCell(4);
                    costoCell.setAttribute('style', 'width: 100px; text-align: right;');
                    var firmaOdontologoCell = row.insertCell(5);
                    firmaOdontologoCell.setAttribute('rowspan', '2');
                    
                    var editCell = row.insertCell(6);
                    editCell.setAttribute('rowspan', '2');
                    editCell.id = "tdlink" + response[i].tratamientoId;   
                    editCell.innerHTML = '<a href="#" onclick="displayModal(' + response[i].tratamientoId + ');"><img src="{{ asset('bundles/histclinica/images/icons/edit-20.png') }}" width="20px" alt="Editar" title="Editar"></a>';    
                                        
                    var rowdescription = table.insertRow(rowCount + 1);
                    rowdescription.id = 'descripcion' + response[i].tratamientoId;                    
                    
                    fechaCell.innerHTML = response[i].fecha;
                    dienteCell.innerHTML = response[i].diente;
                    horaCell.innerHTML = response[i].hora;
                    tratamientoCell.innerHTML = response[i].procedimiento;
                    var auxPath = "{{ asset('ROUTE') }}";
                    var path = auxPath.replace('ROUTE', 'uploads/pacientes/' + response[i].firmaPaciente);
                    auxPath = "{{ asset('ROUTE') }}";
                    path = auxPath.replace('ROUTE', 'uploads/medicos/' + response[i].firmaOdontologo);
                    firmaOdontologoCell.innerHTML = '<img id="firmaM_' + response[i].tratamientoId + '" src="' + path + '" style="max-width: 150px; max-height: 50px">';
                    costoCell.innerHTML = '$ ' + response[i].costoTotal;
                }
            }, "json");
        }
    }
    $(document).ready(function() {
        $('#datetimepicker').datetimepicker({
            language: 'es'
        });
        var inputProcedimiento = document.getElementById('procedimiento');
        var inputDiente = document.getElementById('diente');
        var inputCostoProcedimiento = document.getElementById('costoProcedimiento');
        var divProcedError = document.getElementById('procedimiento_errors');
        var divDienteError = document.getElementById('diente_errors');
        var divCostProcedError = document.getElementById('costoProcedimiento_errors');
        var divRowProcedimiento = document.getElementById('rowProcedimiento');
        var div_Borrar = document.getElementById('divBorrar');
        inputProcedimiento.setAttribute('id', procedimiento + '_' + numRows.toString());
        inputDiente.setAttribute('id', diente + '_' + numRows.toString());
        inputCostoProcedimiento.setAttribute('id', costoProcedimiento + '_' + numRows.toString());
        divProcedError.setAttribute('id', procedimiento + '_' + numRows.toString() + '_errors');
        divDienteError.setAttribute('id', diente + '_' + numRows.toString() + '_errors');
        divCostProcedError.setAttribute('id', costoProcedimiento + '_' + numRows.toString() + '_errors');
        divRowProcedimiento.setAttribute('id', rorwProcedimiento + '_' + numRows.toString());
        div_Borrar.setAttribute('id', divBorrar + '_' + numRows.toString());
        
        cargarProcedimientos();
    });

    function borrarProcedimiento(elemento) {
        var boton = elemento.parentNode;
        var row = boton.parentNode;
        var rowProcedimiento = row.parentNode;
        var procedimientos = rowProcedimiento.parentNode;
        procedimientos.removeChild(rowProcedimiento);
    }

</script>
{% endblock%}